Vue.config.keyCodes.enter = 13   //Vue.config 是一个对象，包含 Vue 的全局配置

var vm = new Vue({
    el:'#app',
    data: {
        keywords: '',
        newtodo: '',
        allSelected: false,
        isEditing: -1,
        isSeleted: 'all',
        list: [
                { id: 1, name: '吃饭', completed: true },
                { id: 2, name: '睡觉', completed:  false },
                { id: 3, name: '打豆豆', completed:  false },
                { id: 4, name: '敲代码', completed:  false }
            ]
    },
    methods: {
        add () {
            var car = {id: new Date, name: this.keywords, ctime: new Date() }
            this.list.push(car)
            this.keywords = ''
        },
        del (id) {
            var index = this.list.findIndex( item => {
                if(item.id == id) {
                    return item;
                }
            })
            this.list.splice(index,1)
            // console.log(123)
        },
        toggleAll () {
            this.allSelected = !this.allSelected
            // console.log(this.allSelected)
            this.list.forEach(item => {
                item.completed = this.allSelected
            })
        },
        editTodo (item) {
            this.isEditing = item.id
        },
        saveTodo () {
            this.isEditing = -1
        },
        filterTodo (val) {
            console.log(val)
            this.isSeleted = val
            console.log(this.isEditing)
            // console.log(arr);
        },
        clearDone () {
            var arr = this.list.filter(item => {
                return !item.completed
            })
            console.log(arr)
            this.list = arr
        }
    },
    directives: {
        focus(el,binding) {
            if(binding.value) {
                el.focus()
            }
        }
    },
    computed: {
        rest() {
            var arr = this.list.filter(item => {
                return !item.completed
            })
            return arr.length
        },
        newTodos() {
            if (this.isSeleted == 'all') {
                console.log(1)
                return this.list
            } else if (this.isSeleted == 'active') {
                return this.list.filter(item => {
                console.log(2)
                    return !item.completed
                })
            } else {
                return this.list.filter(item => {
                console.log(3)
                    return item.completed
                })
            }
        }
    }
})